<template>
	<view>
		<u-navbar title="资料修改">
		</u-navbar>
		<u--form labelPosition="left" :model="userdata" ref="uForm">
			<u-form-item label="头像" prop="avatar" borderBottom>
				<view class="u-flex u-flex-end" style="padding-right: 20rpx;flex: 1;">

					<u-avatar :src="userdata.avatar" @click="avatartap"></u-avatar>
				</view>
			</u-form-item>
			<u-form-item label="用户名" prop="avatar" borderBottom>
				<view class="" style="padding-right: 20rpx;flex: 1;">
					<u--input v-model="userdata.nickname" border="none" inputAlign="right"></u--input>
				</view>
			</u-form-item>
		</u--form>

		<bottombox>
			<u-button type="primary" :loading="loading" text="提交" shape="circle" @click="onedit"></u-button>
		</bottombox>
	</view>
</template>

<script>
	import {
		getUserProfile,
		updateUserProfile,
		uploadAvatar
	} from "@/api/system/user.js"
	import {
		chooseFile
	} from '@/uni_modules/uview-ui/components/u-upload/utils.js';
	import upload from "@/utils/upload.js"
	import commonConfig from "@/config";
	export default {
		data() {
			return {
				userdata: {},
				loading: false,
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				let userdata = await getUserProfile();
				this.userdata = userdata.data
			},
			async avatartap() {
				chooseFile({
					accept: "image",
				}).then(e => {
					upload({
						url: commonConfig.baseApi + "/infra/file/upload",
						filePath: e[0].url
					}).then(e => {
						this.userdata.avatar = e.data
						console.log(e, 123);
					})
				})
			},
			async onedit() {
				this.loading = true;
				await updateUserProfile(this.userdata)
				this.loading = false;
				this.$u.toast("修改成功")
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>